import { Button, Card, Checkbox, Col, Form, Input, message, Row, Select, Table } from 'antd';
import React, { useEffect, useState } from 'react'
import {getHosListRequset,getHosProvinceRequest,getHosCityOrdistrictRequest,updateHosStatusRequest} from '@api/hospital/hospitalListRequest'
import type {hospitalListContentType,getHosListSearchParamsType,hospitalListItemsType,getHosProvinceReturnType} from '@api/hospital/model/hospitalListTypes'
import { useNavigate } from 'react-router-dom';
export default function HospitalList() {
  const navigate = useNavigate()
  const [form] = Form.useForm()
  //当前页
  const [page,setPage] = useState(1)
  //每页页数
  const [limit,setLimit] = useState(3)
  //所有页数量
  const [total,setTotal] = useState(0)
  //保存分页列表数据
  const [allHosList,setAllHosList] = useState<hospitalListContentType>([])
  //searchParams参数数据
  const [searchPar,setSearchPar] = useState<getHosListSearchParamsType>({})
  //加载
  const [isLoading,setIsLoading] = useState(false)
  //保存省数据
  const [province,setProvince] = useState<getHosProvinceReturnType>([])
  //保存市数据
  const [cityList,setCityList] = useState<getHosProvinceReturnType>([])
  //保存区数据
  const [district,setDistict] = useState<getHosProvinceReturnType>([])
  //保存医院类型
  const [hosListType,setHosListType] = useState<getHosProvinceReturnType>([])
  //定义状态重新渲染页面
  const [reRender,setReRender] = useState(true)
  //获取分页列表
  useEffect(() => { 
     setIsLoading(true)
    const getHosList = async () => {
     const re = await getHosListRequset(page,limit,searchPar)
     setAllHosList(re.content)
     setTotal(re.totalElements)
     setIsLoading(false)
    }
    getHosList()
  },[page,limit,searchPar,reRender])
  //获取省份
  useEffect(() => {
    const getHosProvince = async () => {
      const re = await getHosProvinceRequest()
      setProvince(re)
    }
    getHosProvince()
  },[])
  //获取医院类型
  useEffect(() => {
    const getHosListType = async () => {
      const re = await getHosCityOrdistrictRequest("10000")
      setHosListType(re)
    }
    getHosListType()
  },[])
  //选中省份触发的回调
  const selectProvinceHandle = async (idValue:string) => {
     const re = await getHosCityOrdistrictRequest(idValue)
     setCityList(re)
     form.setFieldsValue({cityCode:null,districtCode:null})
     setDistict([])
  }
  //选中市触发的回调
  const selectCityHandle = async (idValue:string) => {
    const re = await getHosCityOrdistrictRequest(idValue)
    setDistict(re)
    form.setFieldsValue({districtCode:null})
  }
  //查询
  const finishHandle = (fieldValue:getHosListSearchParamsType) => {
    setSearchPar(fieldValue)
  }
  //清空
  const clearHandle = () => {
   setSearchPar({})
   setCityList([])
   setDistict([])
  }
  //改变医院状态
  const changeStatusHandle = (id:string,status:0|1) => {
    return async () => {
      await updateHosStatusRequest(id,status)
      setReRender(!reRender)
      message.success('更新状态成功')
    }
  }
  const columns = [
    {
      title: '序号',
      width: 80,
      dataIndex: 'index',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院logo',
      dataIndex: 'logoData',
      render(logoData:string){
        return <img width={100} src={`data:image/jpeg;base64,${logoData}`} alt="" />
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '等级',
      render(_:any,data:hospitalListItemsType){
        return data.param.hostypeString
      }
    },
    {
      title: '详细地址',
      render(_:any,data:hospitalListItemsType){
        return data.param.fullAddress
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      render(status:0|1){
        return status === 0 ? '下线': '上线'
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      dataIndex: 'cz',
      fixed: "right" as 'right',
      width: 120,
      render(_:any,data:hospitalListItemsType){
        const {id} = data
        const {status} = data
        const {hoscode} = data
        return(
          <div>
            <Button type='primary' onClick={() => {navigate(`/syt/hospital/hospitalshow/${id}`)}}>查看</Button>
            <Button type='primary' onClick={() => {navigate(`/syt/hospital/hospitalSchedule/${hoscode}`)}}>排班</Button>
            <Button type='primary' onClick={changeStatusHandle(id,status === 0 ? 1 : 0)}>{status === 0 ? '上线':'下线'}</Button>
          </div>
        )
      }
    }
  ];
  return (
    <Card>
      <Form
        name="basic"
        wrapperCol={{ span: 30 }}
        form={form}
        onFinish={finishHandle}
      >
        <Row gutter={10}>
          <Col span={4}>
            <Form.Item
              name="provinceCode"
            >
              <Select
                placeholder="请选择省"
                allowClear
                onChange={selectProvinceHandle}
              >
                {
                  province.map(item => {
                    return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                  })
                }
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item
              name="cityCode"
            >
              <Select
                placeholder="请选择城市"
                allowClear
                onChange={selectCityHandle}
              >
                {
                  cityList.map(item => {
                    return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                  })
                }
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item
              name="districtCode"
            >
              <Select
                placeholder="请选择区"
                allowClear
              >
                {
                  district.map(item => {
                    return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                  })
                }
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item
              name="hosname"
            >
              <Input placeholder='医院名称' />
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item
              name="hoscode"
            >
              <Input placeholder='医院编号' />
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item
              name="hostype"
            >
              <Select
                placeholder="医院类型"
                allowClear
              >
                {
                  hosListType.map((item) => {
                    return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                  })
                }
              </Select>
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={10}>
          <Col span={4}>
            <Form.Item
              name="status"
            >
              <Select
                placeholder="医院状态"
                allowClear
              >
                <Select.Option value={1}>上线</Select.Option>
                <Select.Option value={0}>下线</Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={1.5}>
            <Form.Item >
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Col>
          <Col span={1}>
            <Form.Item >
              <Button type="default" htmlType="reset" onClick={clearHandle}>
                清空
              </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <Table
        columns={columns}
        dataSource={allHosList}
        rowKey='id'
        bordered
        scroll={{ x: 1400 }}
        loading={isLoading}
        pagination={{
          current:page,
          total:total,
          pageSize:limit,
          pageSizeOptions: [2, 3,4, 5],
          showSizeChanger: true,
          showTotal(total) {
            return `总共${total}条数据`
          },
          onChange(page,limit){
            setPage(page)
            setLimit(limit)
          }
        }
        }
      />
    </Card>
  )
}
